<!--
 * @Descripttion: 课堂分析详情-ppt识别
 * @version: V1.0.0.1
 * @Author: zhaozhenzhuo
 * @Date: 2025-10-23 14:51:33
 * @LastEditors: zhaozhenzhuo
 * @LastEditTime: 2025-10-23 14:51:33
-->
<template>
	<div class="ppt-identify-wrapper">
		<!-- 按钮 -->
		<div v-if="false" class="btn-wrapper">
			<img src="@/assets/images/lessonAnalysisDetails/screenshot.png" />
			<p>视频截图添加PPT</p>
		</div>
		<!-- ppt列表 -->
		<div class="ppt-wrapper">
			<div
				v-for="(item, index) in pptList"
				:key="index"
				class="ppt-item"
				:class="{ active: currentPPTId === item.id }"
				@click="onPptClickHandle(item.time, item.id)"
			>
				<p class="time">{{ item.formatTime }}</p>
				<img :src="item.pictureUrl" />
				<p class="index">{{ index + 1 }}</p>
			</div>
			<div v-if="!pptList?.length" class="empty-wrap">暂无内容</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { getErrorMessage, getPPTListAPI } from '@/api/index';
import type { PPTItem } from './PPTIndentify.type';
import { formatSeconds } from '@/assets/js/utils';

const props = withDefaults(
	defineProps<{
		lessonCode: string;
	}>(),
	{
		lessonCode: ''
	}
);

const emit = defineEmits<{
	(e: 'changeVideoTime', time: number): void; // 切换视频时间
}>();

onMounted(() => {
	getPPTList();
});

// 当前点击的ppt id
const currentPPTId = ref<number | null>(null);
// PPT列表
const pptList = ref<PPTItem[]>([]);
// 获取ppt列表
const getPPTList = async () => {
	try {
		const data = await getPPTListAPI(props.lessonCode);

		pptList.value = data
			? data.map((item, index) => ({
					...item,
					formatTime: formatSeconds(item.time / 1000),
					id: index
			  }))
			: [];
	} catch (err) {
		console.error(getErrorMessage(err));
		pptList.value = [];
	}
};

// 点击ppt
const onPptClickHandle = (time: number, id: number) => {
	currentPPTId.value = id;
	emit('changeVideoTime', time / 1000);
};
</script>

<style lang="scss" scoped>
.ppt-identify-wrapper {
	padding: 1.6rem;
	height: 100%;

	.btn-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1rem;
		padding: 0 1.1rem;
		width: fit-content;
		height: 3.2rem;
		line-height: 3.2rem;
		border-radius: 0.8rem;
		border: 1px solid $color-brand;
		cursor: pointer;

		img {
			width: $font-size-small-1;
			height: $font-size-small-1;
		}
		p {
			font-size: $font-size-small-1;
			color: $text-color-brand;
			margin-left: 0.1rem;
		}
	}

	.ppt-wrapper {
		position: relative;
		height: 100%;
		overflow-y: auto;

		.ppt-item {
			display: inline-block;
			position: relative;
			margin-top: 1.6rem;
			margin-right: 2rem;
			width: calc(50% - 1rem);
			aspect-ratio: 16 / 9;
			border-radius: 0.8rem;
			border: 1px solid #f5f7ff;
			overflow: hidden;
			cursor: pointer;

			&:nth-child(2n) {
				margin-right: 0;
			}

			&.active {
				border-color: $color-brand;
			}

			.time {
				position: absolute;
				top: 0.8rem;
				left: 0.8rem;
				padding: 0 1rem;
				height: 3.2rem;
				background-color: $bg-block-color-dark;
				line-height: 3.2rem;
				font-size: $font-size-base;
				color: #ffffff;
				border-radius: 0.8rem;
			}

			.index {
				position: absolute;
				bottom: 1.3rem;
				right: 0.9rem;
				width: 3.2rem;
				height: 3.2rem;
				background: $bg-block-color-dark;
				border-radius: 1.6rem;
				font-size: $font-size-base;
				color: #ffffff;
				line-height: 3.2rem;
				text-align: center;
			}

			img {
				width: 100%;
				height: 100%;
				border: none;
				outline: none;
			}
		}
	}
}
</style>
